<!DOCTYPE html>
<html lang="en" ng-app="detailcontroller">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="sm/sm.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<style>
    .item-media img {
        max-width: 100%;
    }

    .swiper-container {
        margin-top: 0.5rem !important;
    }

    .card {
        margin: 0 !important;
    }

    .swiper-slide {
        height: 10rem !important;

        background-size: cover !important;
    }

    .word {
        min-height: 1rem;
        font-size: 14px !important;
    }
    .item-content {
        display: block !important;
        padding: 10px !important;
    }
    .item-content .img {
        width: 100%;
        background-size: cover;
        background-position: center center;
        height: 8rem;
    }
</style>
<body style="background: #ffffff !important;">
<div class="page-group">
    <div class="page" id="page-pre" ng-controller="detailcontroller">
        <header class="bar bar-nav to-padding-top">
            <a class="icon icon-left pull-left" href="javascript:app.backLastPosition();"></a>
            <p class="title">食谱详情</p>
        </header>


        <div class="content pull-to-refresh-content">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="swiper-container" data-space-between='10'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide" ng-repeat=" img in recipesdada.img.split(',') "
                         style="background: url({{img}})"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <div class="list-block">
                <ul>
                    <li class="item-content">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <div class="item-title" style="font-size: 16px">{{recipesdada.title}}</div>

                        </div>
                    </li>
                    <li class="item-content lilist" style="display:flex !important; padding: 0 !important;;" ng-repeat="Material in recipesdada.Material.split('@')">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <div class="item-title word">{{Material.split(':')[0]}}</div>
                            <div class="item-after word">{{Material.split(':')[1]}}</div>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="content-block-title">详细步骤</div>
            <div class="list-block">
                <ul>
                    <li class="item-content" ng-repeat=" word in recipesdada.content.split('@')">
                        <div class="item-inner">
                            <div  class="  word ">{{word}}</div>

                        </div>
                        <div class="img" style="background: url({{recipesdada.contentimg.split(',')[$index]}})"></div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <script src="js/angular.js"></script>
    <script src="sm/zepto.min.js"></script>
    <script>$.config = {router: false}</script>
    <script src="sm/sm.min.js"></script>
    <link rel="stylesheet" href="sm/sm-extend.min.css">
    <script type='text/javascript' src='sm/sm-extend.min.js' charset='utf-8'></script>
    <link rel="stylesheet" href="css/group-detail.css">
    <script src="controller/app-init-func.js"></script>
    <script src="controller/detail-controller.js"></script>

</div>
<script>
    $.init();
    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
        Zepto.toast("正在刷新");
        setTimeout(function () {

            Zepto.pullToRefreshDone('.pull-to-refresh-content');

        }, 2000);

    });


</script>
</body>
</html>